// app global css in SCSS formprimary--
:root {
  --primary: #1976d2;
  --secondary: #26a69a;
  --accent: #9c27b0;
  --dark: #1d1d1d;
  --dark-page: #121212;
  --positive: #21ba45;
  --negative: #c10015;
  --info: #31ccec;
  --warning: #f2c037;
}

.body--light {
  --theme: #f8f4ed;
  --fcolor: #000;
  --grey: #e5d3aa;
}

.body--dark {
  --theme: #2b333e;
  --fcolor: #fffef9;
  --grey: #132c33;
}

@font-face {
  font-family: Emoji;
  src:
    local("Apple Color Emojiji"),
    local("Segoe Emoji"),
    local("Noto Color Emoji");
  unicode-range: U+1F000-1F644, U+203C-3299;
}

body {
  margin: 0;
  padding: 0;
  color: var(--fcolor);
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    Emoji,
    Helvetica,
    Arial,
    sans-serif;
}

body.body--dark .shiki-light {
  display: none;
}

body.body--light .shiki-dark {
  display: none;
}

pre.shiki {
  position: relative;
  margin: 8px 0;
  padding: 10px 10px 10px 3em;
  font-size: 16px;
  white-space: pre;
  text-align: left;
  word-break: break-all;
  outline: none;
  box-shadow: 0 0 1px var(--fcolor);

  &::before {
    position: absolute;
    top: 10px;
    bottom: 12px;
    left: 0.5em;
    padding-right: 0.5em;
    overflow: hidden;
    color: var(--primary);
    text-align: right;
    border-right: 1px solid var(--primary);
    content: "01\A 02\A 03\A 04\A 05\A 06\A 07\A 08\A 09\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36\A 37\A 38\A 39\A 40\A 41\A 42\A 43\A 44\A 45\A 46\A 47\A 48\A 49\A 50\A 51\A 52\A 53\A 54\A 55\A 56\A 57\A 58\A 59\A 60\A 61\A 62\A 63\A 64\A 65\A 66\A 67\A 68\A 69\A 70\A 71\A 72\A 73\A 74\A 75\A 76\A 77\A 78\A 79\A 80\A 81\A 82\A 83\A 84\A 85\A 86\A 87\A 88\A 89\A 90\A 91\A 92\A 93\A 94\A 95\A 96\A 97\A 98\A 99";
  }
}
